<style>
.info-avatar img {
  width: 160px !important;
  height: 160px !important;
  display: block;
}
</style>

<style lang="less" scoped>
.info {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background-color: #ffffff;

  .info-container {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .info-head {
      text-align: center;
      margin-top: 62px;
      position: relative;
      .info-avatar {
        width: 160px !important;
        height: 160px !important;
        display: block;
        background: rgba(252, 179, 63, 1);
        border-radius: 50%;
        text-align: center;
        line-height: 160px;
        font-size: 38px;
        color: #fff;
        margin: 0 auto;
        overflow: hidden;
        img {
          width: 160px !important;
          height: 160px !important;
          border-radius: 50%;
        }
      }
      .info-sex {
        height: 28px;
        width: 28px;
        position: absolute;
        top: 60%;
        left: 55%;
      }
      .info-name {
        margin-top: 24px;
        font-size: 36px;
        font-weight: 500;
        color: #3f3f3f;
        text-align: center;
      }
    }
    .info-wrapper {
      height: 100px;
      display: flex;
      max-height: 96px;
      align-items: center;
      padding-left: 30px;
      border-bottom: 1px solid #f5f5f5;
      div {
        width: 20%;
        margin-right: 60px;
        color: rgba(169, 171, 169, 1);
        font-size: 28px;
        display: inline-block;
      }
      span {
        font-size: 32px;
        color: rgba(63, 63, 63, 1);
      }
    }
    .info-footer {
      position: fixed;
      width: 100%;
      // padding: 0 60px;
      bottom: 76px;
      display: flex;
      justify-content: center;
      button {
        width: 240px;
        height: 76px;
        background: rgba(83, 109, 254, 1);
        box-shadow: 0px 10px 24px 0px rgba(83, 109, 254, 0.44);
        border-radius: 16px;
        color: #ffffff;
      }

      i {
        color: #ffffff;
        font-size: 28px;
        margin-right: 8px;
      }
    }
  }
}
</style>

<template>
  <div class="info">
    <div v-show="Object.keys(userInfo).length" class="info-container">
      <div class="info-head">
        <span v-html="userInfo.photo" class="info-avatar" />
        <!-- <span>
          <img
            v-if="isTrue(userInfo)"
            :src="userInfo.photo"
            class="info-avatar"
          >
          <span
            v-else
            class="name-circle"
          >{{ userInfo.name }}</span>
        </span>-->

        <img v-if="userInfo.gender==='MAN'" src="./../../assets/man.png" class="info-sex" />
        <img v-else src="./../../assets/woman.png" class="info-sex" />
        <p class="info-name">{{ userInfo.username || '暂无' }}</p>
      </div>
      <div class="info-detail">
        <div class="info-wrapper">
          <div>部门</div>
          <span>{{ userInfo.deptname || '暂无' }}</span>
        </div>
        <div class="info-wrapper">
          <div>职位</div>
          <span>{{ userInfo.sentrynames || '暂无' }}</span>
        </div>
        <div class="info-wrapper">
          <div>手机</div>
          <span>{{ userInfo.phone || '暂无' }}</span>
        </div>
        <div class="info-wrapper">
          <div>座机</div>
          <span>{{ userInfo.zuoji || '暂无' }}</span>
        </div>
        <div class="info-wrapper">
          <div>邮箱</div>
          <span>{{ userInfo.companyemail || '暂无' }}</span>
        </div>
        <div class="info-wrapper">
          <div>直接领导</div>
          <span>{{ userInfo.zsldname || '暂无' }}</span>
        </div>
        <div class="info-wrapper">
          <div>入职日期</div>
          <span>{{ userInfo.rzrq || '暂无' }}</span>
        </div>
      </div>
      <div class="info-footer" align="center">
        <!-- <button @tap="handleSendMsg">
          <i
            class="jeicon jeicon-message"
          />
          发捷信
        </button>-->
        <button @tap="handleCall">
          <i class="jeicon jeicon-phone" />
          打电话
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Organ from '../../class/Organ'
import Dialog from '../../class/Dialog'

export default {
  name: 'UserInfo',
  components: {},
  data() {
    return {
      headerColor: '#ffffff',
      leftColor: '#536DFE',
      userInfo: {},
      isCreated: false,
      rightId: '',
    }
  },
  computed: {
    userId() {
      return JE.getCurrentUser().id
    },
  },
  created() {},
  mounted() {
    const curPageObj = plus.webview.currentWebview()
    this.rightId = curPageObj.userId
    console.log('个人详情页面的数据获取', curPageObj)
    this.getData(this.rightId)
  },
  destroyed() {},
  methods: {
    // 通过userId来获取个人的所有信息
    async getData(userId) {
      this.userInfo = await Organ.getUserInfoById(userId)
      this.userInfo.photo = JE.getUserPhoto(
        userId,
        true,
        this.userInfo.username
      )
      this.userInfo.name =
        this.userInfo.username &&
        this.userInfo.username.substring(this.userInfo.username.length - 2)
    },
    handleCall() {
      if (JE.isNotEmpty(this.userInfo.phone)) {
        // 调起电话
        plus.device.dial(this.userInfo.phone, false)
      } else {
        JE.msg('手机号码无效')
      }
    },
    // 点击发捷信创建聊天
    async handleSendMsg() {
      if (this.rightId === this.userId) {
        JE.msg('自己和自己不能聊天哈')
        return false
      }
      const res = await Dialog.createSingleChat(
        this.userId,
        this.rightId,
        this.userInfo
      )
      const targetWebview = plus.webview.getWebviewById('JE-PLUGIN-IM')
      mui.fire(targetWebview, 'createdSing', res)
      // const ws = plus.webview.currentWebview();
      // plus.webview.close(ws);
    },
  },
}
</script>
